<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="120px"
    >
      <el-form-item label="隧道名称" prop="field1">
        <el-select v-model="queryParams.field1" placeholder="请选择隧道名称" @keyup.enter.native="handleQuery" clearable>
          <el-option
            v-for="item in suidaoList"
            :key="item.id + ''"
            :label="item.field2"
            :value="item.field2 + ''"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备编码" prop="field15">
        <el-input
          v-model="queryParams.field15"
          placeholder="请输入设备编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['biz:jidiansheshiguzhangxuncha:add']"
        >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          v-if="false"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['biz:jidiansheshiguzhangxuncha:edit']"
        >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          v-if="false"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['biz:jidiansheshiguzhangxuncha:remove']"
        >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['biz:jidiansheshiguzhangxuncha:export']"
        >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="jidiansheshiguzhangxunchaList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="故障巡查单号" align="center" prop="id" />
      <el-table-column label="隧道名称" align="center" prop="field1" />
      <!--      <el-table-column label="路线名称" align="center" prop="field2" />-->
      <!--      <el-table-column label="路线编码" align="center" prop="field3" />-->
      <el-table-column label="设备编码" align="center" prop="field15" />
      <el-table-column label="设备类型" align="center" prop="field14" />
      <el-table-column label="设备名称" align="center" prop="field6" />
      <el-table-column label="养护机构" align="center" prop="field4" />
      <el-table-column label="故障日期" align="center" prop="field5" />
      <el-table-column label="故障原因" align="center" prop="field9" />
      <el-table-column label="检查人" align="center" prop="field13" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['biz:jidiansheshiguzhangxuncha:edit']"
          >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['biz:jidiansheshiguzhangxuncha:remove']"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或编辑/查看故障巡查对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="隧道名称" prop="field1">
          <el-select v-model="form.field1" placeholder="请选择隧道名称" clearable>
            <el-option
              v-for="dict in suidaoList"
              :key="dict.id + ''"
              :label="dict.field2"
              :value="dict.field2 + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="养护机构" prop="field4">
          <el-input v-model="form.field4" placeholder="请输入养护机构" clearable/>
        </el-form-item>
        <el-form-item label="设备编码" prop="field15">
          <el-select v-model="form.field15" placeholder="请选择设备编码">
            <el-option
              v-for="dict in rcxcdata"
              :key="dict.field1 + ''"
              :label="dict.field12"
              :value="dict.field12 + ''"
              v-if="dict.field6 == '异常且严重'"
            ></el-option>
          </el-select>
          <!--          <el-input v-model="form.field15" placeholder="请输入设备编码" clearable/>-->
        </el-form-item>
        <el-form-item label="设备类型" prop="field14">
          <!--          <el-cascader-->
          <!--            placeholder="请选择设备名称"-->
          <!--            v-model="form.field6"-->
          <!--            :options="shebeiList">-->
          <!--          </el-cascader>-->
          <el-select v-model="form.field14" @change="click1" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="item in shebeistyle"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="field6">
          <el-select v-model="form.field6" placeholder="请选择设备名称" clearable>
            <el-option
              v-for="item in shebeiname"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--          <el-input v-model="form.field2" placeholder="请输入设备名称" />-->
        </el-form-item>
        <el-form-item label="故障日期" prop="field5">
          <el-date-picker
            clearable
            size="small"
            v-model="form.field5"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择故障日期"
          >
          </el-date-picker>
        </el-form-item>
        <!--        <el-form-item label="设备位置" prop="field7">-->
        <!--          <el-input v-model="form.field7" placeholder="请输入" />-->
        <!--        </el-form-item>-->
        <el-form-item label="故障原因" prop="field9">
          <el-input v-model="form.field9" placeholder="请输入故障原因" clearable/>
        </el-form-item>
        <el-form-item label="故障部位" prop="field8">
          <el-input v-model="form.field8" placeholder="请输入故障部位" clearable/>
        </el-form-item>
        <el-form-item label="应急措施" prop="field10">
          <el-input v-model="form.field10" placeholder="请输入应急措施" clearable/>
        </el-form-item>
        <el-form-item label="图片" prop="field11">
          <imageUpload v-model="form.field11" />
        </el-form-item>
        <el-form-item label="检查人" prop="field12">
          <el-input v-model="form.field12" placeholder="请输入检查人" clearable/>
        </el-form-item>
        <el-form-item label="记录人" prop="field13">
          <el-input v-model="form.field13" placeholder="请输入记录人" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import router from "../../../router";
  import {
    listJidiansheshiguzhangxuncha,
    getJidiansheshiguzhangxuncha,
    delJidiansheshiguzhangxuncha,
    addJidiansheshiguzhangxuncha,
    updateJidiansheshiguzhangxuncha,
    exportJidiansheshiguzhangxuncha,
  } from "@/api/biz/jidiansheshiguzhangxuncha";
  import { listSuidao } from "@/api/biz/suidao";
  import { listShebei} from "@/api/biz/shebei";
  import { listJdssrcxc} from "@/api/biz/jdssrcxc";
  export default {
    name: "Jidiansheshiguzhangxuncha",
    data() {
      return {
        rcxcdata:[],
        shebeistyle:[
          {
            value: '供配电设施(1)',
            label: '供配电设施(1)'
          }, {
            value: '照明设施(2)',
            label: '照明设施(2)'
          }, {
            value: '通风设施(3)',
            label: '通风设施(3)'
          }, {
            value: '消防设施(4)',
            label: '消防设施(4)'
          }, {
            value: '监控与通信设施(5)',
            label: '监控与通信设施(5)'
          }
        ],
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        suidaoList: [],
        // 设备管理表格数据
        shebeiList: [],
        shebeidata: [],
        shebeiname: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 故障巡查表格数据
        jidiansheshiguzhangxunchaList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          field1: null,
          field2: null,
          field3: null,
          field4: null,
          field5: null,
          field6: null,
          field7: null,
          field8: null,
          field9: null,
          field10: null,
          field11: null,
          field12: null,
          field13: null,
          field14: null,
          field15: null,
          type: null,
          num: null,
          status: null,
          date1: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          field1: [
            { required: true, message: "隧道名称不能为空", trigger: "blur" },
          ],
          // field2: [
          //   { required: true, message: "路线名称不能为空", trigger: "blur" },
          // ],
          // field3: [
          //   { required: true, message: "路线编码不能为空", trigger: "blur" },
          // ],
          field4: [
            { required: true, message: "养护机构不能为空", trigger: "blur" },
          ],
          field5: [
            { required: true, message: "故障日期不能为空", trigger: "blur" },
          ],
          field6: [
            { required: true, message: "设备名称不能为空", trigger: "blur" },
          ],
          // field7: [
          //   { required: true, message: "设备位置不能为空", trigger: "blur" },
          // ],
          // field8: [
          //   { required: true, message: "故障部位不能为空", trigger: "blur" },
          // ],
          field9: [
            { required: true, message: "故障原因不能为空", trigger: "blur" },
          ],
          // field10: [
          //   { required: true, message: "应急措施不能为空", trigger: "blur" },
          // ],
          field12: [
            { required: true, message: "检查人不能为空", trigger: "blur" },
          ],
          field13: [
            { required: true, message: "记录人不能为空", trigger: "blur" },
          ],
          field14: [
            { required: true, message: "设备类型不能为空", trigger: "blur" },
          ],
          field15: [
            { required: true, message: "设备编码不能为空", trigger: "blur" },
          ],
        },
      };
    },
    mounted() {
      this.getList();
      listSuidao({}).then((response) => {
        this.suidaoList = response.rows;
      });
      listShebei({}).then((response) => {
        this.shebeidata = response.rows;
      });
      listJdssrcxc({}).then((response) => {
        this.rcxcdata = response.rows;
      });
    },
    methods: {
      click1(){
        if(this.form.field14==='供配电设施(1)'){
          this.shebeiname=[{
            value: '高压断路器柜(0100)',
            label: '高压断路器柜(0100)'
          }, {
            value: '高压互感器与避雷器柜(0200)',
            label: '高压互感器与避雷器柜(0200)'
          }, {
            value: '高压计量柜(0300)',
            label: '高压计量柜(0300)'
          }, {
            value: '高压隔离开关和负荷开关(0400)',
            label: '高压隔离开关和负荷开关(0400)'
          }, {
            value: '35kV电力变压器(0500)',
            label: '35kV电力变压器(0500)'
          }, {
            value: '10kV电力变压器(0600)',
            label: '10kV电力变压器(0600)'
          }, {
            value: '箱式变电站(0700)',
            label: '箱式变电站(0700)'
          }, {
            value: '电力电容器柜(0800)',
            label: '电力电容器柜(0800)'
          }, {
            value: '低压开关柜(0900)',
            label: '低压开关柜(0900)'
          }, {
            value: '配电箱、插座箱、控制箱(1000)',
            label: '配电箱、插座箱、控制箱(1000)'
          }, {
            value: '电力线缆(1100)',
            label: '电力线缆(1100)'
          }, {
            value: '电缆桥架、槽盒、托架及支架(1200)',
            label: '电缆桥架、槽盒、托架及支架(1200)'
          }, {
            value: '变电所铁构件(1300)',
            label: '变电所铁构件(1300)'
          }, {
            value: '综合微机保护装置(1400)',
            label: '综合微机保护装置(1400)'
          }, {
            value: '直流电源、UPS电源、EPS电源(1500)',
            label: '直流电源、UPS电源、EPS电源(1500)'
          }, {
            value: '自备发电设备(1600)',
            label: '自备发电设备(1600)'
          }, {
            value: '防雷装置(1701)',
            label: '防雷装置(1701)'
          }, {
            value: '接地装置(1702',
            label: '接地装置(1702)'
          },
          ]
        };
        if(this.form.field14==='照明设施(2)'){
          this.shebeiname=[{
            value: '隧道灯具(0100)',
            label: '隧道灯具(0100)'
          }, {
            value: '洞外路灯(0200)',
            label: '洞外路灯(0200)'
          }, {
            value: '照明线路(0300)',
            label: '照明线路(0300)'
          },
          ]
        };
        if(this.form.field14==='通风设施(3)'){
          this.shebeiname=[{
            value: '射流风机(0100)',
            label: '射流风机(0100)'
          }, {
            value: '轴流风机(0200)',
            label: '轴流风机(0200)'
          }, {
            value: '轴流风机及离心风机(0300)',
            label: '轴流风机及离心风机(0300)'
          }
          ]
        };
        if(this.form.field14==='消防设施(4)'){
          this.shebeiname=[{
            value: '点型感烟感温探测器(0101)',
            label: '点型感烟感温探测器(0101)'
          }, {
            value: '双/三波长火焰探测器(0102)',
            label: '双/三波长火焰探测器(0102)'
          }, {
            value: '线型感温光纤火灾探测系统(0103)',
            label: '线型感温光纤火灾探测系统(0103)'
          }, {
            value: '光纤光楯感温火灾探测系统(0104)',
            label: '光纤光楯感温火灾探测系统(0104)'
          }, {
            value: '视频型火灾报警装置(0105)',
            label: '视频型火灾报警装置(0105)'
          }, {
            value: '手动报警按钮(0106)',
            label: '手动报警按钮(0106)'
          }, {
            value: '火灾报警控制器(0107)',
            label: '火灾报警控制器(0107)'
          }, {
            value: '液位检测器(0200)',
            label: '液位检测器(0200)'
          }, {
            value: '消火栓及灭火器(0300)',
            label: '消火栓及灭火器(0300)'
          }, {
            value: '阀门(0400)',
            label: '阀门(0400)'
          }, {
            value: '水喷雾灭火设施(0500)',
            label: '水喷雾灭火设施(0500)'
          }, {
            value: '水泵接合器(0600)',
            label: '水泵接合器(0600)'
          }, {
            value: '水泵(0700)',
            label: '水泵(0700)'
          }, {
            value: '电动机(0800)',
            label: '电动机(0800)'
          }, {
            value: '给水管(0900)',
            label: '给水管(0900)'
          }, {
            value: '气体灭火设施(1000)',
            label: '气体灭火设施(1000)'
          }, {
            value: '消防车、消防摩托车(1100)',
            label: '消防车、消防摩托车(1100)'
          }, {
            value: '消防水池(1200)',
            label: '消防水池(1200)'
          }, {
            value: '电光标志(1300)',
            label: '电光标志(1300)'
          }
          ]
        };
        if(this.form.field14==='监控与通信设施(5)'){
          this.shebeiname=[{
            value: '亮度检测器(0100)',
            label: '亮度检测器（0100）'
          }, {
            value: '能见度检测器(0200)',
            label: '能见度检测器(0200)'
          }, {
            value: 'CO检测器(0300)',
            label: 'CO检测器(0300)'
          }, {
            value: '风速风向检测器(0400)',
            label: '风速风向检测器(0400)'
          }, {
            value: '车辆检测器(0500)',
            label: '车辆检测器(0500)'
          }, {
            value: '摄像机(0601)',
            label: '摄像机(0601)'
          }, {
            value: '编解码器(0602)',
            label: '编解码器(0602)'
          }, {
            value: '视频矩阵(0603)',
            label: '视频矩阵(0603)'
          }, {
            value: '监视器(0604)',
            label: '监视器(0604)'
          }, {
            value: '硬盘录像机(0605)',
            label: '硬盘录像机(0605)'
          }, {
            value: '其他闭路电视监控系统(0699)',
            label: '其他闭路电视监控系统(0699)'
          }, {
            value: '视频交通事件检测器(0700)',
            label: '视频交通事件检测器(0700)'
          }, {
            value: '大屏幕投影系统(0800)',
            label: '大屏幕投影系统(0800)'
          }, {
            value: '地图板(0900)',
            label: '地图板(0900)'
          }, {
            value: '紧急电话及广播(1000)',
            label: '紧急电话及广播(1000)'
          }, {
            value: '本地控制器(1100)',
            label: '本地控制器(1100)'
          }, {
            value: '横通道门(1200)',
            label: '横通道门(1200)'
          }, {
            value: '横通道控制箱(1300)',
            label: '横通道控制箱(1300)'
          }, {
            value: '可变信息标志(1401)',
            label: '可变信息标志(1401)'
          }, {
            value: '可变限速标志(1402)',
            label: '可变限速标志(1402)'
          }, {
            value: '车道指示器(1403)',
            label: '车道指示器(1403)'
          }, {
            value: '交通信号灯(1404)',
            label: '交通信号灯(1404)'
          }, {
            value: '光缆、电缆(1501)',
            label: '光缆、电缆(1501)'
          }, {
            value: '光端机(1502)',
            label: '光端机(1502)'
          }, {
            value: '路由器、交换机(1503)',
            label: '路由器、交换机(1503)'
          }, {
            value: '监控室设备及系统(1600)',
            label: '监控室设备及系统(1600)'
          }, {
            value: '监控室(1700)',
            label: '监控室(1700)'
          }
          ]
        };
      },
      /** 查询故障巡查列表 */
      getList() {
        this.loading = true;
        listJidiansheshiguzhangxuncha(this.queryParams).then((response) => {
          this.jidiansheshiguzhangxunchaList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          field1: null,
          field2: null,
          field3: null,
          field4: null,
          field5: null,
          field6: null,
          field7: null,
          field8: null,
          field9: null,
          field10: null,
          field11: null,
          field12: null,
          field13: null,
          field14: null,
          field15: null,
          type: null,
          num: null,
          status: "0",
          date1: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加机电设施故障巡查";
        this.form.field1 = this.$route.query.f1
        this.form.field4 = this.$route.query.f2
        this.form.field5 = this.$route.query.f3
        this.form.field6 = this.$route.query.f4
        this.form.field8 = this.$route.query.f5
        this.form.field12 = this.$route.query.f9
        this.form.field13 = this.$route.query.f10
        this.form.field14 = this.$route.query.f11
        this.form.field15 = this.$route.query.f12
      },
      /** 编辑/查看按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getJidiansheshiguzhangxuncha(id).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改机电设施故障巡查";
          this.form.field1 = this.$route.query.f1
          this.form.field4 = this.$route.query.f2
          this.form.field5 = this.$route.query.f3
          this.form.field6 = this.$route.query.f4
          this.form.field8 = this.$route.query.f5
          this.form.field12 = this.$route.query.f9
          this.form.field13 = this.$route.query.f10
          this.form.field14 = this.$route.query.f11
          this.form.field15 = this.$route.query.f12
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            const shebeiID = this.form.field15;
            const shebeiType = this.form.field14;
            const shebeiName = this.form.field6;
            var shebeiTypeLength = shebeiType.toString().length;
            var shebeiNameLength = shebeiName.toString().length;
            if (shebeiID.toString().substring(0,1) != shebeiType.toString().substring(shebeiTypeLength-2,shebeiTypeLength-1)){
              this.$modal.msgError("设备编码与设备类型不匹配");
              return valid.preventDefault();
            }
            if (shebeiID.toString().substring(1,5) != shebeiName.toString().substring(shebeiNameLength-5,shebeiNameLength-1)){
              this.$modal.msgError("设备编码与设备名称不匹配");
              return valid.preventDefault();
            }
            if (this.form.id != null) {
              updateJidiansheshiguzhangxuncha(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {

              addJidiansheshiguzhangxuncha(this.form).then((response) => {
                this.$modal.msgSuccess("添加成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除机电设施故障巡查单号为"' + ids + '"的数据项？').then(function() {
          return delJidiansheshiguzhangxuncha(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
          .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$modal
          .confirm("是否确认导出所有机电设施故障巡查数据项？")
          .then(() => {
            this.exportLoading = true;
            return exportJidiansheshiguzhangxuncha(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
            this.exportLoading = false;
          })
          .catch(() => {});
      },
    },
  };
</script>
